<template>
	<view class="tab_bar">
		<view class="tabbarBox">
			<view class="handleBox" v-for="(item,index) in tabBarList" :key="index">
				<view class="menuBox" @click="goPages(item.pageIndex,index,item.id)">
					<view class="menuIcon">
						<image v-if="item.pageIndex!=selectIndex" :class="item.id===3 ? 'icon' : 'img'" :src="item.iconPath" mode="aspectFill"></image>
						<image v-else :class="item.id===3 ? 'icon' : 'img'" :src="item.selectIconPath"></image>
					</view>
					<view class="menuName">
						<text :class="item.pageIndex==selectIndex?'TextColor':'Text'">{{item.tabbarName}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex: this.page,
				tabBarList: "",
			}
		},
		props:{
			page:String
		},
		//uniapp子组件不支持应用生命周期，所以只能用vue生命周期
		created() {
			//console.log(this.selectIndex)
			//tabbar数据，这儿也支持后台定义通过接口获取数据
			this.tabBarList = [{
					"tabbarName": "首页", //tababr名称
					"iconPath": "/static/shouye.png", //tabbar icon
					"selectIconPath": "/static/shouyes.png", //tabbar 选择icon
					"pageIndex": "/pages/index/index" ,//页面路径
					"id":1
				},
				{
					"tabbarName": "拍摄", //tababr名称
					"iconPath": "/static/paishe.png", //tabbar icon
					"selectIconPath": "/static/paishes.png", //tabbar 选择icon
					"pageIndex": "/pages/shoot/shoot" ,//页面路径
					"id":2
				},
				{
					//"tabbarName": "拍摄", //tababr名称
					"iconPath": "/static/jiahao.png", //tabbar icon
					"selectIconPath": "/static/jiahao.png", //tabbar 选择icon
					"pageIndex": "/pages/shoot/shoot" ,//页面路径
					"id":3
				},
				{
					"tabbarName": "消息", //tababr名称
					"iconPath": "/static/xiaoxi.png", //tabbar icon
					"selectIconPath": "/static/xiaoxis.png", //tabbar 选择icon
					"pageIndex": "/pages/message/message" ,//页面路径
					"id":4
				},
				{
					"tabbarName": "我的", //tababr名称
					"iconPath": "/static/wode.png", //tabbar icon
					"selectIconPath": "/static/wodes.png", //tabbar 选择icon
					"pageIndex": "/pages/my/my" ,//页面路径
					"id":5
				}
			]

		},
		methods: {
			//进入tabble页
			goPages(pageIndex,index,id) {
				//console.log(pageIndex,index,this.selectIndex)
				//this.selectIndex=this.tabBarList[index].pageIndex
				//console.log(this.selectIndex)
				if(id===3){
					uni.navigateTo({
						url:"/pages/releaseSnap/releaseSnap"
					})
				}else{
					uni.switchTab({
						url: pageIndex
					})
				}
			},

		},
	}
</script>
<style lang="scss">
	.tab_bar {
		width: 100vw;
		height: 75px;
		position: fixed;
		left: 0;
		bottom: 0;
		/* 模糊大小就是靠的blur这个函数中的数值大小 */
		backdrop-filter: blur(10px);
		background-color: #ffffff;

		.tabbarBox {
			display: flex;
			margin-top: 10rpx;
			justify-content: space-between;


			.handleBox {
				width: 20vw;
				height: 100rpx;

				.menuBox {
					padding: 0rpx 20rpx;
					width: 120rpx;
					height: 98%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					text-align: center;

					.menuIcon{
						margin-top: 20rpx;
					}
					.img {
						width: 50rpx;
						height: 50rpx;
					}
					.icon{
						height: 50px;
						width: 50px;
						margin-bottom: 50px;
						border-radius: 50%;
						border: 10rpx solid #ffffff;
					}
				}
			}
		}
	}

	.Text {
		font-size: 24rpx;
		//font-family: Cochin, serif;
		//font-weight: 900;
	}

	.TextColor {
		@extend .Text;
		color: #e77c90;
	}
</style>